<template>
	<view class="pay-page">
		<u-navbar title="下级列表"  bgColor="rgba(255,255,255,0.0)" :placeholder="true" :auto-back="true">
			<view class="u-nav-slot" slot="right">
				<text class="nav-text" @click="openPop">创建下级</text>
			</view>
		</u-navbar>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="item-left">
				<view class="title">
					{{item.username}}
				</view>
				<view class="time">
					{{item.updateTime}}
				</view>
			</view>
			<view class="reduce">
				<view>分成比例:{{item.fh}}%</view>
				<view style="width: 100rpx; margin-left: 20rpx;">
					<u-button text="修改" size="mini" color="linear-gradient(90deg, #FE8A03 0%, #FA5900 100%)"
						@click="openreduce(item.memberId,item.fh)"></u-button>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-popup :show="show" @close="close" mode="center" round="10">
			<view class="create">
				<view class="title">
					创建下级
				</view>
				<view class="create-item">
					<view class="item-title">
						用户名
					</view>
					<u-input placeholder="请输入用户名" border="none" v-model="name"
						:placeholderStyle="placeholderStyle"></u-input>
				</view>
				<view class="create-item">
					<view class="item-title">
						手机号码
					</view>
					<u-input maxlength="11" type="number" placeholder="请输入手机号码" border="none" v-model="phone"
						:placeholderStyle="placeholderStyle"></u-input>
				</view>
				<view class="create-item">
					<view class="item-title">
						分红比例 <text>(最高比例{{userinfo.fh}}%)</text>
					</view>
					<u-input type="number" placeholder="请输入分红比例" border="none" v-model="rate"
						:placeholderStyle="placeholderStyle"></u-input>
				</view>
				<view class="create-item">
					<view class="item-title">
						密码
					</view>
					<u-input type="password" placeholder="请输入密码" border="none" v-model="password"
						:placeholderStyle="placeholderStyle"></u-input>
				</view>
				<view class="btn">
					<u-button type="primary" color="linear-gradient(90deg, #FE8A03 0%, #FA5900 100%)" text="确认创建"
						@click="create"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="reduceshow" @close="reduceclose" mode="center" round="10">
			<view class="create">
				<view class="title">
					修改比例
				</view>
				<view class="create-item">
					<view class="item-title">
						分红比例 <text>(最高比例{{userinfo.fh}}%)</text>
					</view>
					<u-input type="number" placeholder="请输入分红比例" border="none" v-model="reducerate"
						:placeholderStyle="placeholderStyle"></u-input>
				</view>
				<view class="btn">
					<u-button type="primary" color="linear-gradient(90deg, #FE8A03 0%, #FA5900 100%)" text="确认修改"
						@click="reducecreate"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				name: '',
				phone: '',
				rate: '',
				password: '',
				list: [],
				page: 1,
				status: 'loadmore',
				userinfo: {},
				placeholderStyle: {
					fontSize: '24rpx'
				},
				reduceshow: false,
				id: '',
				reducerate: ''
			}
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.getlist()
		},
		onLoad() {
			this.getlist()
			this.getuserinfo()
		},
		methods: {
			reducecreate() {
				if (this.reducerate == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入分红比例'
					})
					return
				}
				let params = {
					memberId: this.id,
					fh: this.reducerate,
				}
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/api/member/user/setFh',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.page = 1
						this.getlist()
						this.reduceclose()
					}
				})
			},
			openreduce(id, fh) {
				this.reducerate = fh
				this.id = id
				this.reduceshow = true
			},
			reduceclose() {
				this.reduceshow = false
			},
			getuserinfo() {
				this.$Request({
					method: 'GET',
					url: '/api/getInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 200) {
						this.userinfo = res.user
					}
				})
			},
			openPop() {
				this.show = true
			},
			close() {
				this.show = false
			},
			create() {
				if (this.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名'
					})
					return
				}
				if (this.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return
				}
				if (this.rate == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入分红比例'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
					return
				}
				let params = {
					username: this.name,
					phone: this.phone,
					fh: this.rate,
					password: this.password
				}
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/api/member/user/createLowerLevel',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.name = ''
						this.phone = ''
						this.rate = ''
						this.password = ''
						this.page = 1
						this.getlist()
						this.close()
					}
				})
			},
			getlist() {
				let params = {
					pageNum: this.page,
					pageSize: 10
				}
				this.$Request({
					method: 'POST',
					url: '/api/member/user/lowerLevelList',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						if (res.rows.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.rows
						} else {
							this.list = [...this.list, ...res.rows]
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-page { 
		padding: 30rpx;
		min-height: calc(100vh - 91rpx);
		background-image: url('../../../static/goods/top-bg.png');
		background-size: 100% 561rpx;
		background-repeat: no-repeat;

		.nav-text {
			font-size: 26rpx;
		}

		.item {
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0.06);

			.item-left {
				.title {
					font-size: 28rpx;
					color: #333;
				}

				.time {
					font-size: 24rpx;
					margin-top: 20rpx;
					color: #999;
				}
			}

			.reduce {
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;
			}
		}

		.create {
			width: 80vw;
			padding: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
			}

			.create-item {
				padding: 20rpx;
				box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx 0;

				.item-title {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 20rpx;

					text {
						font-size: 24rpx;
						color: #ff0000;
					}
				}
			}

			.btn {
				margin-top: 30rpx;
			}
		}
	}
</style>